<template>
  <el-row id="stlp">
    <!--<el-form :inline="true">-->
      <!--<el-form-item>-->
        <!--<el-input v-model="meterAddrStr" size="small" placeholder="终端编号" style="vertical-align: top"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item>-->
        <!--<el-input v-model="streetLampTypeStr" size="small" placeholder="路灯类型" style="vertical-align: top"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item>-->
        <!--<el-input v-model="addressStr" size="small" placeholder="路灯具体地址" style="vertical-align: top"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item>-->
        <!--<el-input v-model="powerUnitStr" size="small" placeholder="权属单位" style="vertical-align: top"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item>-->
        <!--<el-button type="primary" @click="search" size="small" style="line-height:14px;vertical-align: top;">查询</el-button>-->
        <!--<el-button type="primary" @click="handleAdd" size="small" style="line-height:14px;vertical-align: top;">新增路灯</el-button>-->
      <!--</el-form-item>-->
      <!--<el-form-item>-->
        <!--<el-button type="primary" @click="exportExcel" size="small" style="line-height:14px;vertical-align: top;">导出-->
        <!--</el-button>-->
      <!--</el-form-item>-->
    <!--</el-form>-->
    <el-table :data="exceptionReportList" v-loading="listLoading" border style="width: 100%; font-size: 12px;" row-class-name="tabRow" tooltipEffect="light">
      <el-table-column align="center" prop="meterAddr" label="终端编号"></el-table-column>
      <el-table-column align="center" prop="streetLampType" label="路灯类型"></el-table-column>
      <el-table-column align="center" prop="address" label="地址" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="lngLat" label="经纬度" show-overflow-tooltip>
        <template scope="scope">
          <div class="t_blue" @click="goMap(scope.row.lngLat,scope.row.address)">查看地图</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="powerUnit" label="权属单位" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="deptName" label="部门" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" width="150" :formatter="createTimeStr" label="修改时间"></el-table-column>
      <!--<el-table-column align="center" label="操作" width="230">-->
        <!--<template scope="scope">-->
          <!--<el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <!--<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
          <!--<el-button size="small" type="primary" @click="doSave(scope.$index, scope.row)">生成二维码</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <el-col :span="24" class="toolbar" style="margin-top: 15px;" v-show="!listLoading">
      <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
    <el-dialog :title="dialogTitle" v-model="showAdd" :close-on-click-modal="false" @close="resetStreetLamp" >
      <el-form :model="streetLamp" label-width="110px" :rules="streetLampFormRules" ref="streetLamp" style="margin-top: -15px;">
        <el-form-item label="终端编号" prop="meterAddr">
          <el-input v-model="streetLamp.meterAddr" :maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="路灯类型" prop="streetLampType">
          <el-input v-model="streetLamp.streetLampType" :maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="路灯具体地址" prop="address">
          <el-input v-model="streetLamp.address" :maxlength="255"></el-input>
        </el-form-item>
        <el-form-item label="经纬度" prop="lngLat">
          <el-input v-model="streetLamp.lngLat" :maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="权属单位" prop="powerUnit">
          <el-input v-model="streetLamp.powerUnit" :maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="部门选择" id="formheight" prop="deptid">
          <el-select v-model="streetLamp.deptid" style="width: 100%"  placeholder="部门" :disabled="isDetail && opType === 'detail'" @change="getTeamList()">
            <el-option v-for="(item, index) in deptList" :key="index" :label="item.deptName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="团队选择" prop="treamId">
          <el-select v-model="streetLamp.treamId" style="width: 100%"  placeholder="团队" :disabled="isDetail && opType === 'detail'" @change="getPdList()">
            <el-option v-for="(item, index) in teamList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配电箱选择" prop="distributionBoxid">
          <el-select v-model="streetLamp.distributionBoxid" style="width: 100%"  placeholder="配电箱" :disabled="isDetail && opType === 'detail'"  @change="getRoadList()">
            <el-option v-for="(item, index) in pdList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支路选择" prop="roadId">
          <el-select v-model="streetLamp.roadId" style="width: 100%"  placeholder="支路" :disabled="isDetail && opType === 'detail'">
            <el-option v-for="(item, index) in roadList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="部门id" prop="deptid">-->
          <!--<el-input v-model="streetLamp.deptid" :maxlength="100"></el-input>-->
        <!--</el-form-item>-->
      </el-form>
      <div scope="footer" class="dialog-footer" style="float: right;margin-bottom: 20px;">
        <el-button @click="resetStreetLamp">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="saveAccountLoading">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog v-model="showWeiXin" @close="resetWeiXin" >
      <img :src="qrcodeUrl" style="width:320px;display: block;margin:0 auto">
    </el-dialog>
  </el-row>
</template>

<script type="text/ecmascript-6">
  import {resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  export default{
    data () {
      return {
        total: 2,
        page: 1,
        pageSize: 10,
        exceptionReportList: [],
        deptList: [],
        listLoading: false,
        loginType: '',
        meterAddrStr: '',
        streetLampTypeStr: '',
        addressStr: '',
        powerUnitStr: '',
        dialogTitle: '新增路灯',
        showAdd: false,
        showWeiXin: false,
        saveAccountLoading: false,
        isDetail: false,
        streetLampFormRules: {
          meterAddr: [
            {required: true, message: '请输入终端编号', trigger: 'blur'}
          ],
          streetLampType: [
            {required: true, message: '请输入路灯类型', trigger: 'blur'}
          ],
          address: [
            {required: true, message: '请输入路灯具体地址', trigger: 'blur'}
          ],
          lngLat: [
            {required: true, message: '请输入经纬度', trigger: 'blur'}
          ],
          powerUnit: [
            {required: true, message: '请输入权属单位', trigger: 'blur'}
          ]
        },
        streetLamp: {
          id: '',
          meterAddr: '',
          streetLampType: '',
          address: '',
          lngLat: '',
          powerUnit: '',
          deptid: '',
          treamId: '',
          distributionBoxid: '',
          roadId: '',
        },
        qrcodeUrl: '',
        companytype: '',
        pdList: [],
        teamList: [],
        roadList: [],
        user:{}
      }
    },
    methods: {
      getRoadList(){
        var para = {
          pageNumber: 1,
          pageSize: 10000,
          type: this.companytype,
          deptid: this.streetLamp.deptid,
          treamId: this.streetLamp.treamId,
          roadId: this.streetLamp.roadId,
        }
        this.$http.post('/smartLight/web/accessRoad/getList.htm', para).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.roadList = resBody.result.content
          }
        })
      },
      getTeamList () {
        var para = {
          pageNumber: 1,
          pageSize: 10000,
          type: this.companytype,
          deptid: this.streetLamp.deptid
        }
        this.$http.post('/smartLight/web/sysTream/getList.htm', para).then(response => {
          var resBody = response.body
//          this.streetLamp.treamId = '';
//          this.streetLamp.distributionBoxid = '';
//          this.streetLamp.roadId = '';
          if (resBody.isSuccess === 0) {
            this.teamList = resBody.result.content
            console.log(this.teamList)
          }
        })
      },
      resetWeiXin () {
        this.showWeiXin = false
        this.qrcodeUrl = ''
      },
      doSave (index, row) {
        this.$http.post('/smartLight/xywl/getQRcodeCXNEW.htm', {id: row.id}).then(response => {
          var data = response.body
          if (data.res === 0) {
            this.qrcodeUrl = data.url
            this.showWeiXin = true
          } else {
            this.$message({
              showClose: true,
              message: '生成二维码失败',
              type: 'error'
            })
          }
        })
      },
      // 【新增】
      handleAdd (index, row) {
        this.showAdd = true
        this.dialogTitle = '新增路灯'
        this.teamList = []
        this.streetLamp.treamId = ''
        this.$http.post('/smartLight/web/baseAccount/getDeptsList.htm', {}).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.deptList = resBody.result
          }
        })
      },
      // 【编辑】
      handleEdit (index, row) {
        this.showAdd = true
        this.dialogTitle = '编辑路灯'
        var params = {
          id: row.id,
          type: this.loginType
        }
        this.$http.post('/smartLight/web/baseAccount/getDeptsList.htm', {}).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.deptList = resBody.result
          }
        })
        this.$http.post('/smartLight/web/streetLamp/getById.htm', params).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.streetLamp = resBody.result
            console.log(resBody.result)
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      handleSubmit () {
        this.$refs.streetLamp.validate((valid) => {
          if (valid) {
            var params = {
              streetLamp: this.streetLamp,
              type: this.loginType
            }

            this.$http.post('/smartLight/web/streetLamp/save.htm', params).then(response => {
              var resBody = response.body
              console.log(resBody)
              if (resBody.isSuccess === 0) {
                this.$message({
                  showClose: true,
                  message: resBody.errorMsg,
                  type: 'success'
                })
                this.page = 1
                this.resetStreetLamp()
                this.initExceptionReportList()
              } else if (resBody.isSuccess === 2) {
                this.listLoading = false
                sessionOut(this) // session超时处理
              } else {
                this.$message({
                  showClose: true,
                  message: resBody.errorMsg,
                  type: 'error'
                })
              }
            })
          }
        })
      },
      resetStreetLamp () {
        this.showAdd = false
        this.streetLamp = {
          id: '',
          meterAddr: '',
          streetLampType: '',
          address: '',
          lngLat: '',
          powerUnit: ''
        }
        this.$refs['streetLamp'].resetFields()
      },
      handleDelete (index, row) {
        var ids = []
        ids.push(row.id)
        this.deleteStreetLamp(ids)
      },
      // 【删除】执行方法
      deleteStreetLamp (ids) {
        this.$confirm('确定删除该路灯信息吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/streetLamp/del.htm', ids + '|' + this.loginType).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
              })
              this.page = 1
              this.initExceptionReportList()
            } else if (resBody.isSuccess === 2) {
              this.listLoading = false
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: '删除失败',
                type: 'error'
              })
            }
          })
        }).catch(() => {
        })
      },
      type2Str (row) {
        if (row.type) {
          return '已处理'
        } else {
          return '未处理'
        }
      },
      //      时间格式化
      createTimeStr (row, column) {
        var d = new Date(row.createTime)
        var year = d.getFullYear()
        var month = d.getMonth() + 1
        if (month < 10) {
          month = '0' + month
        }
        var date = d.getDate()
        if (date < 10) {
          date = '0' + date
        }
        var hh = d.getHours()
        if (hh < 10) {
          hh = '0' + hh
        }
        var mm = d.getMinutes()
        if (mm < 10) {
          mm = '0' + mm
        }
        var ss = d.getSeconds()
        if (ss < 10) {
          ss = '0' + ss
        }
        return year + '-' + month + '-' + date + ' ' + hh + ':' + mm + ':' + ss
      },
      search () {
        this.page = 1
        this.initExceptionReportList()
      },
      // 分页插件查询方法-条数
      handleSizeChange (val) {
        this.pageSize = val
        this.initExceptionReportList()
      },
      // 分页插件查询方法-页数
      handleCurrentChange (val) {
        this.page = val
        this.currentPage = val
        this.initExceptionReportList()
      },
      initExceptionReportList () {
        this.listLoading = true
        var para = {
          pageNumber: this.page,
          pageSize: this.pageSize,
          meterAddr: this.meterAddrStr.trim(),
          streetLampType: this.streetLampTypeStr.trim(),
          address: this.addressStr.trim(),
          powerUnit: this.powerUnitStr.trim(),
          type: this.loginType
        }
        console.log(para)
        this.$http.post('/smartLight/web/streetLamp/getBillList.htm', para).then(response => {
          var resBody = response.body
          this.listLoading = false
          console.log(resBody)
          if (resBody.isSuccess === 0) {
            this.total = resBody.result.totalElements

            this.exceptionReportList = resBody.result.content
          } else if (resBody.isSuccess === 2) {
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      goMap (lngLat, adress) {
        window.open('https://uri.amap.com/marker?position=' + lngLat)
      },
      getPdList () {
        this.listLoading = true
        var para = {
          pageNumber: 1,
          pageSize: 10000,
          type: this.companytype,
          deptid: this.streetLamp.deptid,
          treamId: this.streetLamp.treamId,
        }
        this.$http.post('/smartLight/web/distridutionBox/getList.htm', para).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.pdList = resBody.result.content
//            this.streetLamp.distributionBoxid = '';
//            this.streetLamp.roadId = '';
            this.listLoading = false
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      exportExcel(){
        var para = {
//          pageNumber: this.page,
//          pageSize: this.pageSize,
//          facilitiesNo: this.facilitiesNoStr.trim(),
//          streetLampType: this.streetLampTypeStr.trim(),
//          address: this.addressStr.trim(),
//          powerUnit: this.powerUnitStr.trim(),
//          faultDescription: this.faultDescriptionStr.trim(),
          type: this.loginType,
//          treamId: this.user.treamId,
//          userId: this.user.userId,
//          deptId: this.user.deptId
        }
        console.log(para)
        this.$http.post('/smartLight/web/streetLamp/exportExcle.htm', para).then(response => {
          var resBody = response.body
          console.log(resBody)
          if (resBody.isSuccess === 0) {
            location.href = 'https://www.huadulds.com/file/smartLight/' + resBody.result
          } else if (resBody.isSuccess === 2) {
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },

    },
    mounted () {
      var user = sessionStorage.getItem('user')
      resetBreads(this)
      if (user) {
        user = JSON.parse(user)
        this.user = user
        this.loginType = user.type
        this.companytype = user.type
        this.initExceptionReportList()
//        this.getPdList()
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .is-light
    max-width: 600px;
  .t_blue{color: #20a0ff;cursor pointer}
  #stlp
    .cell
      padding-left: 0px !important
      padding-right 0px !important
      overflow: hidden !important
      text-overflow: ellipsis !important
      white-space: nowrap !important
      .el-checkbox {
        padding-left: 15px !important
      }
    .img-size2 {
      width 30px;
      height 25px;
    }


</style>
